<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/register.css"/>
	</head>
	<body>
		<!-- 头部 -->
		<div class="header">
			<a href="" class="logo"></a>
			<div class="box">
				<a href="" class="a1"></a>
				<a href="" class="a2"></a>
				<a href="" class="a3"></a>
			</div>
		</div>
		<!-- 内容 -->
		<div class="center">
			<div class="img">
				
			</div>
			<div id="login">
				<div class="log">
					<div>已有帐号<a href="">在此登录</a></div>
					<h1>用户注册</h1>
				</div>
				<form class="phone">
					<input class="input1 oinput" type="text"placeholder="手机号" />
					<div class="focus_text1">
						请输入11位手机号码
					</div>
					<input class="input2 oinput" type="text" placeholder="短信校验码"/><a href="" class="huoqu">请输入6位短信校验码</a>
					<div class="focus_text2">请输入6位短信校验码</div>
					<input class="input3 oinput" type="text"placeholder="密码" />
					<div class="focus_text3">
						6-16个字符，建议使用字母加数字或符号组合
					</div>
					<input class="input4 oinput" type="text"placeholder="重复密码" />
					<div class="focus_text4">
						请再次输入密码
					</div>
					<button type="button">同意协议并注册</button>
					<p class="bottom"><a href="" class="a1">《聚美优品用户协议》</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="" class="a2">《聚美隐私权政策》</a></p>
				</form>
				<div class="bottom">
					
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<div class="footer">
			<p class="text">
            Copyright © 2010-2015 北京创锐文化传媒有限公司 Jumei.com 保留一切权利。客服热线：400-123-8888 <br>
            京公网安备 11010102001226 号 | 京ICP证111033号 | 食品流通许可证 SP1101051110165515（1-1）| 营业执照 | 公示制度</p>
			<p class="img">
				<a href="" class="a1"></a>
				<a href="" class="a2"></a>
				<a href="" class="a3"></a>
				<a href="" class="a4"></a>
				<a href="" class="a5"></a>
			</p>
		</div>
	</body>
</html>
<script type="text/javascript">
	let oInput = document.querySelectorAll(".oinput");
	let oText1 = document.querySelector(".focus_text1");
	let oText2 = document.querySelector(".focus_text2");
	let oText3 = document.querySelector(".focus_text3");
	let oText4 = document.querySelector(".focus_text4");
	oInput[0].onfocus = function(){
		oInput[0].style.boxShadow = "0 0 4px 1px rgba(32,157,230,.4)";
		oInput[0].style.marginBottom = 0;
		oText1.style.display = "block";
	}
	oInput[1].onfocus = function(){
		oInput[1].style.boxShadow = "0 0 4px 1px rgba(32,157,230,.4)";
		oText2.style.display = "block";
		oInput[1].style.marginBottom = 0;
	}
	oInput[0].onblur = function(){
		oInput[0].style.boxShadow = "none";
		oText1.style.display = "none";
		oInput[0].style.marginBottom = "20px";
	}
	oInput[1].onblur = function(){
		oInput[1].style.boxShadow = "none";
		oText2.style.display = "none";
		oInput[1].style.marginBottom = "20px";
	}
	oInput[2].onfocus = function(){
		oInput[2].style.boxShadow = "0 0 4px 1px rgba(32,157,230,.4)";
		oInput[2].style.marginBottom = 0;
		oText3.style.display = "block";
	}
	oInput[3].onfocus = function(){
		oInput[3].style.boxShadow = "0 0 4px 1px rgba(32,157,230,.4)";
		oText4.style.display = "block";
		oInput[3].style.marginBottom = 0;
	}
	oInput[2].onblur = function(){
		oInput[2].style.boxShadow = "none";
		oText3.style.display = "none";
		oInput[2].style.marginBottom = "20px";
	}
	oInput[3].onblur = function(){
		oInput[3].style.boxShadow = "none";
		oText4.style.display = "none";
		oInput[3].style.marginBottom = "20px";
	}
</script>
